<!--
 * @Author       : wfl
 * @LastEditors: fj
 * @description  :
 * @updateInfo   :
 * @Date         : 2023-11-03 14:08:54
 * @LastEditTime: 2024-02-23 14:43:45
-->
<script lang="ts" setup name="GSwiperConfig">
import { PropType } from "vue";
const props = defineProps({
  config: {
    type: Object as PropType<any>,
    default: () => {},
  },
  disableCol: {
    type: Boolean,
    default: false,
  },
});
const waperEffects = GlWaperEffects;
</script>

<template>
  <g-field :leavel="2" label="轮播效果">
    <g-switch v-model="config.autoplay.autoplay" inline label="自动播放" />
    <g-switch v-model="config.loop" inline label="无缝循环" />
  </g-field>
  <g-field :leavel="2" label="轮播动画">
    <g-input-number
      v-model="config.row"
      inline
      :min="1"
      label="每页显示行数"
      uffix="行"
    />
    <g-input-number
      v-model="config.col"
      inline
      :min="1"
      :max="disableCol ? 1 : 99999999"
      :disable="disableCol"
      label="每页显示列数"
      uffix="列"
    />
    <g-input-number
      v-model="config.spaceBetween"
      inline
      label="项间隔"
      suffix="px"
    />
    <g-input-number
      v-model="config.slidesPerGroup"
      inline
      label="每次滚动条数"
      suffix="条"
    />
    <g-input-number
      v-model="config.autoplay.delay"
      inline
      label="轮播速度"
      suffix="ms"
    />
  </g-field>
  <g-field :leavel="2" label="轮播方向">
    <n-radio-group v-model:value="config.direction">
      <n-radio-button key="vertical" value="vertical" label="vertical">
        垂直方向
      </n-radio-button>
      <n-radio-button key="horizontal" value="horizontal" label="horizontal">
        水平方向
      </n-radio-button>
    </n-radio-group>
  </g-field>
  <g-field :leavel="2" label="动画效果">
    <g-select v-model="config.effect" :data="waperEffects" />
  </g-field>
</template>
